<template>
  <div class="login">
    <div class="login-con">
      <el-card title="欢迎登录">
        <el-form ref="form" :model="user" class="login-form" v-loading="logining">
          <el-form-item label="用户名">
            <el-input v-model.trim="user.username" placeholder="请输入用户名">
              <i slot="prefix" :class="['fa','fa-user']" style="width:15px"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input
              v-model.trim="user.password"
              type="password"
              placeholder="请输入密码"
              show-password
            >
              <i slot="prefix" :class="['fa','fa-lock']" style="width:15px"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="remember">记住密码</el-checkbox>
            <a class="login-form-forgot" href>忘记密码</a>
            <el-button style="width:100%" type="primary" size="large" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      remember: true,
      logining: false,
      user: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      let me = this;
      me.$refs["form"].validate(valid => {
        if (valid) {
          me.logining = true;
          me.$http.ajax({
            url: "admin/login",
            data: me.user,
            success: res => {
              me.logining = false;
              me.$store.commit("setLoginInfo", res);
              me.$router.push({ name: "home" });
            },
            fail: res => {
              me.logining = false;
            },
            error: res => {
              me.logining = false;
            }
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("./assets/images/login-bg.jpg");
  background-size: cover;
  background-position: center;
  position: raative;
  &-con {
    position: absolute;
    right: 360px;
    top: 50%;
    transform: translateY(-60%);
    width: 300px;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 10px;
      text-align: center;
      color: #c3c3c3;
    }
  }
}

.login .login-form {
  max-width: 300px;
}
.login .login-form-forgot {
  float: right;
}
.login .login-form-button {
  width: 100%;
}
</style>

